<template>
    <div class="">
        <head-top signin-up="home">
            <span slot="logo" class="head_logo" @click="reload">
                L读书
            </span>
            <router-link :to="'/search'" class="link_search" slot="search">
                <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <circle cx="9" cy="9" r="8" stroke="rgb(255,255,255)" stroke-width="2" fill="none"/>
                    <line x1="15" y1="15" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2"/>
                </svg>
            </router-link>
            <section  @click="popMe()"class="link_me" slot="me">
                <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#cdcdcd" d="M491.464803 281.872762c48.937572 0 88.611154-39.684838 88.611154-88.62241 0-48.938596-39.673581-88.623433-88.611154-88.623433-48.962132 0-88.63469 39.684838-88.63469 88.623433C402.830113 242.187925 442.503694 281.872762 491.464803 281.872762z"  /><path fill="#cdcdcd" d="M491.464803 379.892193c-48.962132 0-88.63469 39.684838-88.63469 88.62241 0 48.936549 39.673581 88.621387 88.63469 88.621387 48.937572 0 88.611154-39.684838 88.611154-88.621387C580.075957 419.577031 540.403398 379.892193 491.464803 379.892193z"  /><path fill="#cdcdcd" d="M491.464803 655.144164c-48.962132 0-88.63469 39.684838-88.63469 88.62241 0 48.938596 39.673581 88.623433 88.63469 88.623433 48.937572 0 88.611154-39.684838 88.611154-88.623433C580.075957 694.829002 540.403398 655.144164 491.464803 655.144164z"  /></svg>
            </section>
        </head-top>
        <alert-profile v-if="showAlertProfile"></alert-profile>
    </div>
</template>

<script>
    import headTop from './head';
    import alertProfile from '../../view/book/profile/alertProfile.vue';

    export default {
        data(){
            return {
                showAlertProfile:false,//是否弹出右边我的菜单
            }
        },
        components:{
            headTop,alertProfile
        },
        methods:{
            //点击图标刷新页面
            reload(){
                window.location.reload();
            },
            popMe(){
                this.showAlertProfile=!this.showAlertProfile;
            }
        }

    }
</script>

<style lang="scss" scoped>
    @import "../../assets/styles/mixin";
    .head_logo{
        left: 7.5rem;
        font-weight: 400;
    @include sc(0.7rem, #fff);
    @include wh(2.3rem, 0.7rem);
    @include ct;
    }
    .link_search{
        right:2.3rem;
    @include wh(0.9rem, 0.95rem);
    @include ct;
    }
    .link_me{
        right: 0.7rem;
    @include wh(0.9rem,0.95rem);
    @include ct;
    }
    img{
        top: 29%;
    @include wh(4.8rem,4rem);
    @include cl;
    }
    p {
        top:50%;
    @include cl;
    @include sc(18px,#30a105);
    }
</style>